import { createUseStyles } from "react-jss";

export const COLOR = {
  green: "#35b053",
  yellow: "#f0b45c",
  blue: "#0b71bb",
  red: "#c55252",
  gray: "#d9d9d9",
};

const useStyles = createUseStyles({
  period: {},

  tips: (props: { fontSize: number }) => ({
    padding: "0 10px",
    borderWidth: "1px",
    borderRadius: "4px",
    fontSize: props.fontSize,
    display: "inline-block",
  }),
  tipsHot: {
    backgroundColor: "#FFF4F4",
    color: COLOR.red,
  },
  tipsWarm: {
    backgroundColor: "#FFF9F4",
    color: COLOR.yellow,
  },
  tipsCold: {
    backgroundColor: "#E6F7FF",
    color: COLOR.blue,
  },
  rangePanel: {
    margin: "10px 0 0 0",
    height: "30px",
    padding: "0 15px",
    boxSizing: "border-box",
  },
  range: {
    width: "auto",
  },
});

export { useStyles };
